<template>
	<div class="ratingselect">
		<div class="rating-type">
			<span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
			<span @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}<span class="count">{{positives.length}}</span></span>
			<span @click="select(1,$event)" class="block negative" :class="{'active':selectType===1}">{{desc.negative}}<span class="count">{{negatives.length}}</span></span>
		</div>
		<div class="switch" :class="{'on':onlyContent}" @click="toggleContent">
			<i class="iconfont icon-select"></i>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>

<script>
const POSITIVE=0;
const NEGATIVE=1;
const All=2;
export default{
	props:{
		ratings:{
			type:Array,
			default(){
				return []
			}
		},
		selectType:{
			type:Number,
			default:All
		},
		onlyContent:{
			type:Boolean,
			default:false
		},
		desc:{
			type:Object,
			default(){
				return{
					all:'全部',
					positive:'满意',
					negative:'不满意'
				}
			}
		}
	},
	methods:{
		select(type,event){
			this.$emit('select',type)
		},
		toggleContent(){
			this.$emit('toggle')
		}
	},
	computed:{
		positives(){
			return this.ratings.filter((rating)=>{
				return rating.rateType === POSITIVE
			})
		},
		negatives(){
			return this.ratings.filter((rating)=>{
				return rating.rateType === NEGATIVE
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
.ratingselect{}
.rating-type{padding:18px 0;margin:0 18px;border-bottom:0.5px solid rgba(7,17,27,0.1);font-size:0;}
.rating-type .block{display:inline-block;padding:8px 12px;margin-right:8px;border-radius:1px;color:rgb(77,85,93);font-size:12px;line-height:16px;}
.rating-type .block .count{margin-left:2px;}
.rating-type .positive{background:rgba(0,160,220,0.2);}
.rating-type .negative{background:rgba(77,85,93,0.2);}
.rating-type .active{background:rgb(0,160,220);color:#fff;}
.rating-type span:nth-child(3).active{background:rgb(77,85,93);}

.switch{padding:12px 18px;line-height:24px;border-bottom:0.5px solid rgba(7,17,27,0.1);color:rgb(147,153,159);font-size:0;}
.switch .icon-select{margin-right:4px;font-size:24px;display:inline-block;vertical-align:top;}
.on .icon-select{color:#00c850;}
.switch .text{font-size:12px;}


</style>
